<template>
	<view class="Sex_body">
		<view>
			<view class="welcome">欢迎来到星期九</view>
			<view class="txt">给你推荐同城异性嘉宾</view>
		</view>
		<view>
			<view class="age">年龄</view>
			<picker  class="set_list" :itemStyle="pickerItemStyle" :range="customData" mode='selector' @change="customDataChange" @cancel="cancelSelect">
				<view class="age1">18</view>
			</picker>
		</view>
		<view>
			<view class="age">性别</view>
			<view class="sex">
				<view>
					<view class="sex_nan"></view>
					<view class="nan">男生</view>
				</view>
				<view>
					<view class="sex_nv"></view>
					<view class="nv">女生</view>
				</view>
			</view>
		</view>
		<view class="attention">注意:注册成功后性别将不可修改</view>
		<view class="btns">开启星期九</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pickerItemStyle:{
					height:'16vw'
				},
				type:"left",
				 isPopupShow: false,
				// 自定义数据
				customData: [
					"18","19","20","21","22",
				    "23","24","25","26","27",
					"28","29","30","31","32",
					"33","34","35","36","37",
					"38","39","40","41","42",
					"43","44","45","46","47",
					"48","49","50","51","52",
					"53","54","55","56","57",
					"58","59","60","61","62",
					"63","64","65","66","67"],
			}
		},
		methods: {
			close(type){
				this.type = type;
				this.$refs.popup.close()
			},
			toggle(type) {
			    this.type = type;
			    this.$refs['popup'].open();
			},
			// 点击完成按钮的时候触发，
			customDataChange(e) {
				//通过e.detail.value获取值，获取的是自定义数据的下标
				const val = e.detail.value
				console.log(val);
			},
			cancelSelect(e){
				console.log("您已取消选择");
			},


			
		}
	}
</script>

<style>
	@import "../../static/css/Sex.css";
</style>
